<template>
  <div class="container">
    <a-space direction="vertical" :size="16" fill>
      <DataOverview :renderData="memberTotal.data" title="会员统计" />
      <DataOverview :renderData="orderTotal.data" title="用户订单统计" />
      <DataOverview :renderData="goodsTotal.data" title="商品统计" />
      <!-- <ContentPublishingSource /> -->
    </a-space>
  </div>
</template>

<script lang="ts" setup>
import DataOverview from './components/data-overview.vue'
import { get } from '@/utils'
interface Data {
  title: string
  count: any
  prefix: {
    icon: string
    background: string
    iconColor: string
  }
}
const memberTotal = reactive({
  data: [] as Data[],
  getData: () => {
    get({ url: '/server-base/sys-seller/stats/user/count' }, ({ data }) => {
      data.map(v => {
        v.prefix = {
          background: '',
          icon: '',
          iconColor: '',
        }
      })
      memberTotal.data = data
    })
  },
})
memberTotal.getData()
const orderTotal = reactive({
  data: [] as Data[],
  getData: () => {
    get({ url: '/server-base/sys-seller/stats/order1/count' }, ({ data }) => {
      data.map(v => {
        v.prefix = {
          background: '',
          icon: '',
          iconColor: '',
        }
      })
      orderTotal.data = data
    })
  },
})

orderTotal.getData()
const goodsTotal = reactive({
  data: [] as Data[],
  getData: () => {
    get({ url: '/server-base/sys-seller/stats/goods/count' }, ({ data }) => {
      data.map(v => {
        v.prefix = {
          background: '',
          icon: '',
          iconColor: '',
        }
      })
      goodsTotal.data = data
    })
  },
})

goodsTotal.getData()
</script>

<script lang="ts">
export default {
  name: '多维数据分析',
}
</script>

<style scoped lang="less">
.container {
  padding: 0 20px 20px 20px;
}

:deep(.section-title) {
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 16px;
}

:deep(.chart-wrap) {
  height: 264px;
}
</style>
